<template>
	<div class="container">
		<div class="center">
			<Logo />
			<Title title="注册" />
			<el-form :model="form" label-width="120px">
				<el-from-item>
					<el-input
						v-model="mobile"
						style="
							width: 100%;
							height: 48px;
							font-size: 16px;
							color: #b4b7c2;
							margin-bottom: 15px;
						"
						placeholder="请输入手机号"
						class="custom-input"
					>
						<template #prefix>
							<img :src="aas" alt="prefix icon" class="input-prefix-icon" />
						</template>
					</el-input>
				</el-from-item>
				<el-from-item>
					<div class="getCode">
						<el-input
							v-model="mobile"
							style="
								width: 232px;
								height: 48px;
								font-size: 16px;
								color: #b4b7c2;
								margin: 0 5px 15px 0;
							"
							placeholder="请输入图形验证码"
							class="custom-input"
						>
							<template #prefix>
								<img :src="aas" alt="prefix icon" class="input-prefix-icon" />
							</template>
						</el-input>
						<Captcha />
					</div>
				</el-from-item>
				<el-from-item>
					<div class="getCode">
						<el-input
							v-model="mobile"
							style="
								width: 232px;
								height: 48px;
								font-size: 16px;
								color: #b4b7c2;
								margin: 0 5px 15px 0;
							"
							placeholder="请输入验证码"
							class="custom-input"
						>
							<template #prefix>
								<img :src="aas" alt="prefix icon" class="input-prefix-icon" />
							</template>
						</el-input>
						<el-button
							style="
								width: 148px;
								height: 48px;
								background: rgba(19, 86, 255, 0.1);
								color: #1356ff;
							"
							>获取验证码</el-button
						>
					</div>
				</el-from-item>
				<el-from-item>
					<el-input
						v-model="mobile"
						style="
							width: 100%;
							height: 48px;
							font-size: 16px;
							color: #b4b7c2;
							margin-bottom: 15px;
						"
						placeholder="请设置密码"
						type="password"
						class="custom-input"
					>
						<template #prefix>
							<img :src="aas" alt="prefix icon" class="input-prefix-icon" />
						</template>
					</el-input>
				</el-from-item>
				<el-from-item>
					<el-input
						v-model="mobile"
						style="
							width: 100%;
							height: 48px;
							font-size: 16px;
							color: #b4b7c2;
							margin-bottom: 40px;
						"
						placeholder="确认密码"
						type="password"
						class="custom-input"
					>
						<template #prefix>
							<img :src="aas" alt="prefix icon" class="input-prefix-icon" />
						</template>
					</el-input>
				</el-from-item>
			</el-form>
			<LoginButton buttonText="注册" style="margin-bottom: 80px" />
			<GoLogin type="1" />
		</div>
	</div>
</template>

<script setup lang="ts">
import Logo from './components/logo.vue'
import Title from './components/Title.vue'
import LoginButton from './components/LoginButton.vue'
import GoLogin from './components/GoLogin.vue'
import Captcha from './components/Captcha.vue'

import aas from '@/assets/login/bzbf2@2x.png'

import { onMounted, reactive, ref } from 'vue'

const mobile = ref('')

const form = reactive({
	name: '',
})
</script>

<style scoped lang="less">
.container {
	width: 100vw;
	height: 100vh;
	padding: 30px 0;
	// min-height: 100vh; // 确保最小高度为视口高度
	background-image: url('@/assets/login/bj.png');
	background-size: cover; // 保持比例缩放，覆盖整个容器
	background-repeat: no-repeat; // 不重复
	background-position: center center; // 水平和垂直居中
	background-attachment: fixed; // 背景图固定，滚动时不移动
	// 确保在不同设备上都能正常显示
	overflow-y: auto;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.center {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 390px;
	> div {
		width: 100%;
	}
}
// 自定义输入框前缀图标样式
.input-prefix-icon {
	width: 20px;
	height: 20px;
	object-fit: contain; // 保持图片比例
}

// 自定义输入框背景色
.custom-input {
	:deep(.el-input__wrapper) {
		background-color: #f6f9ff;
		// box-shadow: 0 0 0 1px #f6f9ff inset; // 移除默认边框样式
	}

	:deep(.el-input__wrapper:hover) {
		box-shadow: 0 0 0 1px #f6f9ff inset; // 悬停时保持背景色
	}

	:deep(.el-input__wrapper.is-focus) {
		box-shadow: 0 0 0 1px #1356ff inset; // 聚焦时显示主色边框
	}
}
.getCode {
	display: flex;
	justify-content: space-between;
}
</style>
